import React, {useContext} from 'react';
import './aside.scss'
import {NavLink} from "react-router-dom";
import {visibleContext} from "../globel/store";
const classes=(...params)=>{
  return  params.filter(Boolean).join(' ');
}
const Aside = () => {
  const {visible}=useContext(visibleContext)
  const visibleClass= visible && 'visible'
  console.log(visible)
  return (
    <div className={classes(visibleClass,'aside')}>
        <h2>文档</h2>
      <ul>
        <li><NavLink  to={'intro/introduction'}>
          介绍
        </NavLink></li>
        <li>
          <NavLink  to={'intro/install'}>
            安装
          </NavLink>
        </li>
        <li>
          <NavLink  to={'intro/start'}>
            开始使用
          </NavLink>
        </li>
      </ul>
       <h2>组件</h2>
      <ul>
        <li>
          <NavLink  to={'component/button'}>
            Button
          </NavLink>
        </li>
        <li>
          <NavLink to={'component/input'}>
            Input
          </NavLink>
        </li>
        <li>
          <NavLink to={'component/switch'}>
            Switch
          </NavLink>
        </li>
        <li>
          <NavLink to={'component/alert'}>
            Alert
          </NavLink>
        </li>
        <li>
          <NavLink to={'component/icon'}>
            Icon
          </NavLink>
        </li>
        <li>
          <NavLink to={'component/layout'}>
            Layout
          </NavLink>

        </li>
        <li>
          <NavLink to={'component/tab'}>
            Tab
          </NavLink>

        </li>
      </ul>
    </div>
  );
};
export default Aside;